import React from 'react'

import { Menu } from 'antd';
import './index.less'
import { Link } from 'react-router-dom'
import MenuConfig from '../../config/menuConfig'
import { connect } from 'react-redux'
import {switchMenu} from "../../redux/action";

const SubMenu = Menu.SubMenu;

class NavLeft extends React.Component{
   constructor(){
       super()
       this.state = {
           MenuTreeNode:[],
           currentMenu:[],
       }
   }
    handleClick =({item,key}) => {
        console.log('click', item);
        const {dispatch} = this.props //connetc 之后才可以使用dispatch
        console.log(item.props.title)
        dispatch(switchMenu(item.props.title))

        this.setState({
            currentMenu:[key]
        })
    }
    componentWillMount(){//即将挂载
        console.log(MenuConfig)
        const MenuTreeNode =  this.renderMenu(MenuConfig)
        this.setState({
            MenuTreeNode
        })
    }

    //菜单渲染
    renderMenu = (data) => {
        return data.map((item) => {
            if(item.children){
                return (
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return <Menu.Item title={item.title} key={item.key}>
                <Link to={item.key}>{item.title}</Link>
                </Menu.Item>
        })
    }
    render(){
        return <div>
            <div className="logo">
                <img src="/assets/logo-ant.svg" alt=""/>
                <h1> Imooc ms1</h1>
            </div>
            <div>
                <Menu
                    theme={'dark'}
                    onClick={(e) => this.handleClick(e)}
                    selectedKeys={this.state.currentMenu}
                >
                    {this.state.MenuTreeNode}
                    {/*<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>*/}
                            {/*<Menu.Item key="1">Option 1</Menu.Item>*/}
                            {/*<Menu.Item key="2">Option 2</Menu.Item>*/}
                            {/*<Menu.Item key="3">Option 3</Menu.Item>*/}
                            {/*<Menu.Item key="4">Option 4</Menu.Item>*/}
                    {/*</SubMenu>*/}

                </Menu>
            </div>
        </div>
    }
}
export default connect()(NavLeft)
